<!--
 * @Description: 学员评价
 * @Autor: dyx
 * @Date: 2023-02-10 11:25:26
 * @LastEditTime: 2023-05-26 17:25:52
-->
<template>
  <el-dialog
    title="学员评价"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="JADP-dialog JADP-dialog_center"
    lock-scroll
    append-to-body
    width="70%"
  >
    <table v-if="!loading">
        <td width="180px">班级名称：</td>
        <td colspan="3" class="th_tl">{{ dataForm.classname }}</td>
      </tr>
      <!-- <tr v-if="categoretype == 2">
        <td width="180px">课程名称：</td>
        <td colspan="3" class="th_tl">{{ dataForm.curriculumname }}</td>
      </tr> -->
      <tr v-if="categoretype == 3 || categoretype == 4">
        <td width="180px">课件名称：</td>
        <td colspan="3" class="th_tl">{{ dataForm.coursewarename }}</td>
      </tr>
      <tr v-if="categoretype == 4">
        <td width="180px">讲师名称：</td>
        <td colspan="3" class="th_tl">{{ dataForm.teachername }}</td>
      </tr>
      <tr>
        <td>学员姓名：</td>
        <td colspan="3" class="th_tl">{{ dataForm.studentname }}</td>
      </tr>
      <tr>
        <td>评价时间：</td>
        <td colspan="3" class="th_tl">
          {{ dataForm.creatortime }}
        </td>
      </tr>
      <tr>
        <td width="50px">序号</td>
        <td width="500px">评价项目</td>
        <td v-if="dataForm.xy_pj_student_gradeEntityList[0].method == 1">
          分值
        </td>
        <td>评分</td>
      </tr>
      <tr
        v-for="(item, index) in dataForm.xy_pj_student_gradeEntityList"
        :key="index"
      >
        <td>{{ index + 1 }}</td>
        <td width="500px" class="th_tl">
          {{ item.content }}
        </td>
        <td v-if="item.method == 1">{{ item.score }}</td>
        <td v-if="item.method == 1">
          {{ item.grade }}
          分
        </td>
        <td v-else class="th_tl">
          <!-- <el-checkbox-group v-model="item.grade"> -->
          <el-checkbox
            v-for="(val, inx) in item.optionSum"
            :key="inx"
            v-model="val.value"
            true-label="1"
            false-label="0"
          >
            {{ val.label }}
          </el-checkbox>
          <!-- </el-checkbox-group> -->
        </td>
      </tr>
      <tr>
        <td>学员意见：</td>
        <td colspan="3">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="对教学内容及其他方面的具体意见或建议:"
            v-model="dataForm.advise"
          ></el-input>
        </td>
      </tr>
    </table>

    <!-- <div
      v-for="(item, index) in dataForm.xy_pj_student_gradeEntityList"
      :key="index"
      class="rate"
    >
      <div>{{ index + 1 }}、</div>
      <div class="text">{{ item.name }}</div>
      <div>
        <el-rate disabled v-model="item.grade"></el-rate>
        <span class="rate_text"> {{ item.grade * (item.score / 5) }} 分</span>
      </div>
    </div>
    <div style="margin: 10px 0">学员意见：</div>
    <el-input
      type="textarea"
      :rows="4"
      placeholder="对教学内容及其他方面的具体意见或建议:"
      v-model="dataForm.advise"
    ></el-input> -->

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getEvaluationDetail } from "@/api/zazx/evaluation.js";
export default {
  name: "",
  props: {
    categoretype: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      visible: false,
      loading: true,
      dataForm: {
        xy_pj_student_gradeEntityList: [],
      },
    };
  },
  computed: {},
  methods: {
    async initData(id) {
      this.visible = true;
      this.loading = true;
      this.dataForm.id = id || 0;
      const { data } = await getEvaluationDetail(id);
      this.dataForm = data;
      this.dataForm.xy_pj_student_gradeEntityList.forEach((item) => {
        item.optionSum = JSON.parse(item.optionSum);
      });
      this.loading = false;
    },
  },
};
</script>
<style scoped lang="scss">
table,
td,
th {
  text-align: center;
  border: 1px solid #000;
  border-collapse: collapse;
}
table {
  width: 100%;
}

.th_tl {
  text-align: left;
}

table td {
  padding: 10px;
}
.rate_text {
  display: inline-block;
  color: #f7ba2a;
  transform: translate(10px, 2px);
}
.rate {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
  .text {
    width: 600px;
  }
}
</style>
